<script setup lang="ts">
import { watch, computed, onMounted } from 'vue'
const { selectOptions, value } = defineProps(['selectOptions', 'value'])
const emit = defineEmits(['update:value'])
const localValue = computed({
    get: () => value,
    set: (newValue) => emit('update:value', newValue)
})
watch(
    () => selectOptions,
    () => {
        localValue.value = selectOptions[0]
    }
)
</script>

<template>
    <a-select v-model:value="localValue" class="font-sans" style="width: 12.5rem">
        <a-select-option
            v-for="(item, index) in selectOptions"
            :key="index"
            :label="item"
            :value="item"
            style="font-family: 'Century Schoolbook', fantasy; font-size: .9375rem"
        />
    </a-select>
</template>
